<template>
    <div class="edit">
        <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="130px"
            hide-required-asterisk
            class="demo-ruleForm"
        >
            <el-form-item label="错误类型" prop="type">
                <el-radio-group v-model="ruleForm.type"  @change="typHandler">
                    <el-radio
                        v-for="item in options"
                        :key="item.id"
                        :label="item.id"
                        >{{ item.label }}</el-radio
                    >
                </el-radio-group>
            </el-form-item>
            <el-form-item :key="keyNum" :label="`${ruleForm.type == 'err_name' ? '错误的' : ''}链接名称`" prop="name">
                <el-input
                    type="text"
                    v-model.trim="ruleForm.name"
                    maxlength="20"
                    show-word-limit
                    clearable=""
                    :placeholder="`请输入${ruleForm.type == 'err_name' ? '错误的' : '' }链接名称`"
                ></el-input>
            </el-form-item>

            <el-form-item key="truename" label="正确的链接名称" prop="truename" v-if="ruleForm.type == 'err_name'">
                <el-input
                    type="text"
                    v-model.trim="ruleForm.truename"
                    maxlength="20"
                    show-word-limit
                    clearable=""
                    placeholder="请输入正确的链接名称"
                ></el-input>
            </el-form-item>

            <el-form-item key="truelink" label="正确的链接地址" prop="truelink" v-if="ruleForm.type == 'err_address'">
                <el-input
                    type="text"
                    v-model.trim="ruleForm.truelink"
                    maxlength="100"
                    show-word-limit
                    clearable=""
                    placeholder="请输入正确的链接地址"
                ></el-input>
            </el-form-item>

            <el-form-item key="truecontent" label="正确的内容" prop="truecontent" v-if="ruleForm.type == 'err_content'">
                <el-input
                    type="textarea"
                    v-model.trim="ruleForm.truecontent"
                    maxlength="500"
                    show-word-limit
                    clearable=""
                    placeholder="请输入正确的内容"
                ></el-input>
            </el-form-item>

            <el-form-item label="提出者">
                <el-radio v-model="radio" label="1">{{nickname}}</el-radio>
            </el-form-item>


            <div class="whtie"></div>


            <div class="btns">
                <el-button @click="cancel()" size="medium">取消</el-button>
                <el-button class="btn-submit" type="primary" size="medium" @click="submitForm('ruleForm')"
                    >提交</el-button
                >
            </div>
        </el-form>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
export default {
    head: {},
    props: {},
    components: {},
    data() {
        var checkName = (rule, value, callback1) => {
            var len = value.length,
                max = 20,
                min = 2

            if (!value) {
                return callback1(new Error(`请输入${this.ruleForm.type == 'err_name' ? '错误的' : '' }链接名称`));
            }

            if(len < min || len > max){
                return callback1(new Error(`长度在 ${min} 到 ${max} 个字符`));
            }else{
                this.$ajax({
                    type: "get",
                    url: `${this.$store.state.api.tbUrl}/home/navigateverify.json`,
                    data: {
                        name:value
                    },
                    callback: function (data, res) {
                        if(data.exist == '1'){
                            callback1()
                        }else{
                            callback1(new Error("需要修改的链接名称不存在"));
                        }
                    },
                    error: function () {},
                });
            }
            
        };

        var checkTrueName = (rule, value, callback) => {
            var len = value.length,
                max = 20,
                min = 2;
            
            if (!value) {
                return callback(new Error("请输入正确的链接名称"));
            }
            if(len < min || len > max){
                return callback(new Error(`长度在 ${min} 到 ${max} 个字符`));
            }
            if(this.ruleForm.name == value){
                return callback(new Error("不能与错误的链接名称相同"));
            }else{
                callback();
            }
            
        };
        var checkLink = (rule, value, callback) => {
            var len = value.length,
                max = 100,
                min = 5;
            var isUrl = function(url){
                return /^(https?:\/\/(([a-zA-Z0-9]+-?)+[a-zA-Z0-9]+\.)+[a-zA-Z]+)(:\d+)?(\/.*)?(\?.*)?(#.*)?$/.test(url);
            }

            if (!value) {
                return callback(new Error("请输入链接地址"));
            }
            if(len < min || len > max){
                return callback(new Error(`长度在 ${min} 到 ${max} 个字符`));
            }
            if(!isUrl(value)){
                return callback(new Error("请输入正确的链接地址"));
            } else {
                callback();
            }
        };
        return {
            radio:'1',
            ruleForm: {
                name: "",
                truename:"",
                truelink:"",
                truecontent:"",
                type: "err_name",
            },
            rules: {
                name: [
                    // {required: true, message: '请输入需要纠错的链接名称', trigger: 'blur'},
                    {validator: checkName, trigger: 'blur'}
                ],
                truename: [
                    {validator: checkTrueName, trigger: 'blur'}
                ],
                truelink: [
                    {validator: checkLink, trigger: 'blur'}
                ],
                truecontent: [
                    { required: true, message: '请输入正确的内容', trigger: 'blur' },
                    { min: 0, max: 500, message: '长度在 0 到 500 个字符', trigger: 'blur' }
                ],

                type: [
                    {
                        required: true,
                        message: "请选择错误类型",
                        trigger: "change",
                    },
                ],
            },
            options: [
                {
                    id: "err_name",
                    label: "链接名称错误",
                },
                {
                    id: "err_address",
                    label: "链接地址错误",
                },
                {
                    id: "err_content",
                    label: "内容错误",
                },
            ],
            keyNum:0
        };
    },
    methods: {
        submitForm(formName) {
            const that = this;
            var switchObj = {
                "err_name":function(){
                    return that.ruleForm.truename
                },
                "err_address":function(){
                    return that.ruleForm.truelink
                },
                "err_content":function(){
                    return that.ruleForm.truecontent
                }
            }
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    let obj = {
                        errortype:that.ruleForm.type,
                        name:that.ruleForm.name,
                        correct:switchObj[that.ruleForm.type](),
                    }
                    that.$ajax({
                        type: "post",
                        url: `${that.$store.state.api.tbUrl}/home/modifynavigate.json`,
                        data: obj,
                        callback: function (data, res) {
                            ShowMsg( '提交成功，谢谢您的反馈，我们会尽快核实并更改，核实且修改后，我们也会赠送您XX奖励！', 'success');
                            that.cancel();
                        },
                        error: function () {},
                    });
                } else {
                    console.log("error submit!!");
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        cancel(){
            this.$emit('cancel')
        },
        typHandler(val){
            this.keyNum = this.keyNum + 1
        }
    },
    computed: {
        ...mapGetters({
            userinfo: 'userinfo/getData',
            nickname: 'userinfo/getNickname',
        }),
    },
    mounted() {},
    beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
@import "@css/var.scss";
.edit {
    width: 95%;
    position: relative;

    ::v-deep .el-input--suffix .el-input__inner{
        padding-right: 75px;
    }

    .whtie {
        height: 20px;
    }

    .btns {
        position: absolute;
        bottom: 0px;
        right: 0;

        .btn-submit {
            width: 90px;
        }
    }
}
</style>
 